<template>
  <!-- 用户管理 -->
  <div class="user-manage-box">
    <div class="TreeCard-box" :class="{'is-expand':!isExpand}" :style="{width: `${expandLeft}px`}">
      <TreeCard
        class="tree-card"
        :tree-config="treeConfig"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div class="expand-box" :style="{left:`calc(${expandLeft}px)`}" @click="handleExpand">
      <i :class="[isExpand ? 'el-icon-caret-left' : 'el-icon-caret-right']" />
    </div>
    <div class="CardItems-box">
      <CardItems
        ref="CardItemsRef"
        :outer-params="nodeSelect"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
      />
    </div>
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import TreeCard from '@/components/TreeCard'
import { cardConfig, treeConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { selectConfig } from './config/selectConfig'
import { headerConfig } from './config/tableConfig'

export default {
  name: 'UserManage',
  components: {
    CardItems,
    TreeCard
  },
  data() {
    return {
      isExpand: true,
      expandLeft: 200,
      nodeSelect: {}
    }
  },
  computed: {
    /**
     * 树配置
     */
    treeConfig() {
      return treeConfig['user-manage'] || {}
    },
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig['user-manage'] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['user-manage'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return selectConfig['user-manage'] || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['user-manage'] || []
    }
  },
  methods: {
    /**
     * 处理展开收起
    */
    handleExpand() {
      this.isExpand = !this.isExpand
      this.expandLeft = this.isExpand ? 200 : 0
    },
    /**
     * 处理树节点的点击
    */
    handleNodeClick(data) {
      this.nodeSelect = { deptId: data.id || '', deptIds: data.childrenParams || [] }
      this.$nextTick(() => {
          this.$refs.CardItemsRef?.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-manage-box {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  // padding: 17px;

  .expand-box {
    position: absolute;
    top: 50%;
    height: 40px;
    line-height: 40px;
    width: 12px;
    text-align: center;
    margin-top: -20px;
    font-size: 12px;
    color: #909399;
    background-color: #ededed;
    border-radius: 0 4px 4px 0;
    transition: left 0.3s;
    cursor: pointer;
    z-index: 3;

    &:hover {
      background-color: #ddd;
    }

    .el-input__icon {
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }
  }

  .TreeCard-box {
    height: 100%;
    transition: all 0.3s;

    .tree-card {
      border: 1px solid #eee;
      background-color: #fff;
    }

    &.is-expand {
      overflow: hidden;
      margin-right: 0;
    }
  }

  .CardItems-box {
    flex: 1;
  }
}
</style>
